<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
            padding-top: 1000px;
        }
        img{
            width: 300px;
            height: 300px;
            border: 1px solid black;
            
        }
    </style>
</head>
<body>
    <!-- <img id="img" src="../assets/img/loading.gif"> -->
    <!-- <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1645663883070.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1645664015571.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642124626965.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642124903300.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642125144470.png" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642125372907.png" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642126205567.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642126339982.png" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642126474331.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642128153254.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642128504488.jpg" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642128611359.png" alt="">
    <img class="lazy" src="../assets/img/loading.gif" target-src="https://oa.itany.com/itmupload/1642130948901.jpg" alt=""> -->
    <!-- <script>
        // let img = new Image();
        // // img 标签定义完成 src 取值网络地址后，即使该标签未在页面显示了，也会完成图片请求
        // img.src = "https://oa.itany.com/itmupload/1642413524332.png";
        // img.onload = function(){
        //     let imgDom = document.querySelector("#img");
        //     imgDom.src = "https://oa.itany.com/itmupload/1642413524332.png";
        // }

        // IntersectionObserver 观测对象，用于观测元素是否出于视窗中
        let imgObs = new IntersectionObserver(function(entries){
            console.log(entries)
            // 循环进入视窗的元素
            entries.forEach((ent)=>{
                // 判断元素是否处于视窗中
                if(!ent.isIntersecting) return;
                // 图片预加载
                let imgPath = ent.target.getAttribute("target-src")
                let img = new Image();
                img.src = imgPath;
                img.onload = function(){
                    ent.target.src = imgPath;
                }
            })
        })
        let imgList = document.querySelectorAll(".lazy");
        imgList.forEach(ele => {
            // 为观测对象增加观测元素
            imgObs.observe(ele)
        });
    </script> -->

    <hr>

    <div id="app">
        <img  style="object-fit:cover;" v-for=" path in imgs " v-lazy="path">
    </div>
    <script type="module"> 
        // 图片预加载：图片资源过大，或网络较差的情况下，img对图片的显示是及时显示，会出现分段加载的情况
        //            图片预加载，是将图片在浏览器后台先完成加载，加载过程中，img显示加载效果，当后台加载完成后
        //            基于浏览器缓存，替换img，直接完成图片显示
        // 图片懒加载：在预加载的基础上，增加显示判断，当图片出于浏览器展示视窗中才完成图片请求
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        let imgObs = new IntersectionObserver(function(entries){
            // 循环进入视窗的元素
            entries.forEach((ent)=>{
                // 判断元素是否处于视窗中
                if(!ent.isIntersecting) return;
                // 对原图片进行样式操作
                let fit = ent.target.style.objectFit;
                let pos = ent.target.style.objectPosition;
                if(ent.target.src==""){
                    ent.target.src="";
                    ent.target.style.objectFit="scale-down";
                    ent.target.style.objectPosition="center";
                }
                // 图片预加载
                let imgPath = ent.target.imgPath;
                let img = new Image();
                img.src = imgPath;
                img.onload = function(){
                    ent.target.style.objectFit=fit;
                    ent.target.style.objectPosition=pos;
                    ent.target.src = imgPath;
                }
            })
        })

        const app = createApp({
            data(){
                return {
                    imgs:[
                        "https://oa.itany.com/itmupload/1645663883070.jpg",
                        "https://oa.itany.com/itmupload/1645664015571.jpg",
                        "https://oa.itany.com/itmupload/1642124626965.jpg",
                        "https://oa.itany.com/itmupload/1642124903300.jpg",
                        "https://oa.itany.com/itmupload/1642125144470.png",
                        "https://oa.itany.com/itmupload/1642125372907.png",
                        "https://oa.itany.com/itmupload/1642126205567.jpg",
                        "https://oa.itany.com/itmupload/1642126339982.png",
                        "https://oa.itany.com/itmupload/1642126474331.jpg",
                        "https://oa.itany.com/itmupload/1642128153254.jpg",
                        "https://oa.itany.com/itmupload/1642128504488.jpg",
                        "https://oa.itany.com/itmupload/1642128611359.png",
                        "https://oa.itany.com/itmupload/1642130948901.jpg"
                    ]
                }
            }
        });
        
        app.directive("lazy",function(el,binding){
            el.imgPath = binding.value;
            // // console.log(el.src)
            // if(el.src==""){
            //     el.src="";
            //     el.style.objectFit="scale-down";
            //     el.style.objectPosition="center";
            // }

            imgObs.observe(el);
        })
        
        app.mount("#app")
    </script>
</body>
</html>